<template>
  <router-link to="/" v-if="!isLogin">
    <a-button type="primary" class="user-profile-component">登录</a-button>
  </router-link>
  <div v-else>
    <a-dropdown class="user-profile-component">
      <router-link to="/">{{ userData.username }}</router-link>
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <router-link to="/">个人中心</router-link>
          </a-menu-item>
          <a-menu-item>
            <router-link to="/">设置</router-link>
          </a-menu-item>
          <a-menu-item>
            <router-link to="/">退出登录</router-link>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script lang="ts" setup>
import { user } from '@/stores/user'
import { computed } from 'vue'
// import type { UserDataProps } from '@/stores/user'
const userStore = user()
const isLogin = computed(() => userStore.isLogin)
const userData = computed(() => userStore.data)
</script>

<style lang="less" scoped></style>
